<template>
    <div class="home">
        <el-tabs type="border-card" @tab-click="TabClick" v-model="activeName">
          <el-tab-pane label="编辑" name="first">
                <textarea class="divText" v-model="content" placeholder="回复话题（支持 Markdown 语法）"></textarea>
          </el-tab-pane>
          <el-tab-pane label="预览" name="second">
                <div  v-highlight v-html="html"/>
                <!-- <p v-html="html" v-highlight></p> -->
          </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import TurndownService from 'turndown'
// import markdown from 'markdown'
import marked from 'marked'

export default {
    data() {
        return {
            activeName:'first',
            content:"",
            html:'',
            turndownService:null,
        }
    },
    components: {
        marked,
        TurndownService,
    },
    methods:{
        TabClick(){
            if(this.activeName=="first"){
                this.GetMarkDown();
            }else{
                this.GetHtml();
            }
        },
        GetHtml(){
            this.html=marked(this.content);
            // this.content="";
        },
        GetMarkDown(){
            // this.createTurnDownService();

            // var turndownService = this.turndownService;
            
            // this.content = turndownService.turndown(this.html)
        },
        createTurnDownService:function (){
            if(this.turndownService){
                return this.turndownService;
            }

            const converters = [
                {
                    filter: ['strike', 'del', 's'],
                    replacement: function (content) {
                        return '~~' + content + '~~';
                    }
                },
                {
                    filter: ['pre'],
                    replacement: function (content, node) {
                        // to-markdown supports Syntax-highlighted code blocks (search 'Syntax-highlighted code blocks' in to-markdown.js)
                        var language = node.getAttribute('language') || '';
                        return '\n\n```' + language + '\n' + node.firstChild.textContent.replace(/\n+$/,'') + '\n```\n\n';
                    }
                }
            ];
            this.turndownService = new TurndownService({
                codeBlockStyle: 'fenced',
                emDelimiter: '*',
                strongDelimiter: '**',
                headingStyle: 'atx',
                hr: '---'
            });
            converters.forEach(rule => {
                this.turndownService.addRule(rule.filter.join(''), rule);
            });
            

            // $.each(converters, function (i, rule) {
            //     turndownService.addRule(rule.filter.join(''), rule);
            // });
            var turndownPluginGfm = require('turndown-plugin-gfm');
            var gfm = turndownPluginGfm.gfm;
            var tables = turndownPluginGfm.tables;
            this.turndownService.use(tables);
        }
    }
}
</script>

<style>
.divText{
    height: 200px;
    width: 100%;
    background-color:white;
}

.divTest1{
    float: right;
    background-color: white;
    height: 300px;
    width: 100%;
}
</style>
